<template>
  <div :class="type?'addPadding':''">
    <div style="display: flex;justify-content: space-between;margin-bottom: 10px">
      <div style="color: #FE3636;line-height: 20px">退至虚拟库指退库类型允许选择可用不入库和不可用不入库。</div>
      <el-button type="primary" class="pms-button-primary" @click="jumpSearch">物料编码查询</el-button>
    </div>
    <el-table
      :data="tableData"
      max-height="600"
      style="width: 100%"
    >
      <el-table-column label="一级（板块）" align="center">
        <el-table-column
          prop="catCodeOne"
          label="编码"
          align="center"
          min-width="50"
        />
        <el-table-column
          prop="catNameOne"
          label="名称"
          show-overflow-tooltip
          align="center"
          min-width="140"
        />
      </el-table-column>
      <el-table-column label="二级（大类）" align="center">
        <el-table-column
          prop="catCodeTwo"
          label="编码"
          align="center"
          min-width="70"
        />
        <el-table-column
          prop="catNameTwo"
          label="名称"
          align="center"
          show-overflow-tooltip
          min-width="120"
        />
      </el-table-column>
      <el-table-column label="三级（中类）" align="center">
        <el-table-column
          prop="catCodeThree"
          label="编码"
          align="center"
          min-width="85"
        />
        <el-table-column
          prop="catNameThree"
          label="名称"
          show-overflow-tooltip
          align="center"
          min-width="120"
        />
      </el-table-column>
      <el-table-column label="四级（小类）" align="center">
        <el-table-column
          prop="catCodeFour"
          label="编码"
          align="center"
          min-width="90"
        />
        <el-table-column
          prop="catNameFour"
          label="名称"
          show-overflow-tooltip
          align="center"
          min-width="140"
        />
      </el-table-column>
      <el-table-column label="五级（细类）" align="center">
        <el-table-column
          prop="catCodeFive"
          label="编码"
          align="center"
          min-width="100"
        />
        <el-table-column
          prop="catNameFive"
          label="名称"
          align="center"
          show-overflow-tooltip
          min-width="160"
        />
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getQueryObject } from '@/utils'
import { getMaterialClassifyList } from '@/api/material'

export default {
    name: 'MaterialService',
    components: {
    },
    props: {},
    data() {
        return {
            tableData: [],
            type: ''
        }
    },
    computed: {},
    created() {
        const { pageHtmlType } = getQueryObject()
        this.type = pageHtmlType || ''
    },
    async mounted() {
        await this.getMaterialClassify()
    },
    methods: {
        async getMaterialClassify() {
            await getMaterialClassifyList().then(res => {
                if (+res.code === 200) {
                    this.tableData = res.data
                }
            })
        },
        jumpSearch() {
            const url = `${process.env.VUE_APP_JUNNAN_IFRAME_URL}materialInfo/materialInfoList`
            window.open(url, '_blank')
        }
    }

}
</script>

<style scoped lang="scss">
.addPadding{
    padding: 30px 20px;
}
//::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//    width: 10px; // 横向滚动条
//    height: 8px; // 纵向滚动条 必写
//}
//// 滚动条的滑块
//::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//    background-color: #8b8b8b;
//}
</style>
